document.queryselector vs document.getelementbyid

With a querySelector statement,
you can select an element based on a CSS selector. 
This means you can select elements by ID, class, or any other type of selector. 
Using the getElementById method, you can only select an element by its ID.

Generally, you should opt for the selector that most clearly gets the job done.

If you only need to select an element by ID or class, 
you can use getElementById or getElementsByClassName, respectively. 
If you need to use a more elaborate rule to select elements, 
the querySelector method is your best option.